<template>
<div class="page signIn-page" data-page="signIn" style="z-index: 2;">
	<div class="link-page-nav">
		<a href="#" class="link" @click="$root.backToTab()"> <i
			class="iconfont icon-zuo"></i>
		</a>
	</div>
	<div class="link-page-top" style="padding-bottom: 17px;">
		<div class="link-page-title">签到记录</div>
	</div>
	<div class="page-content" style="padding-bottom: 100px;">
		<div class="inspectionApply-page-top">
			<div id="signCalender"></div>
		</div>
		<div class="pointImg-title">签到明细</div>
		<div class="inspectionApply-page-bottom">
			<div class="timeline" id='recordTime'>
			</div>
		</div>
	</div>
</div>
</template>

<script>
	return {
	    mounted() {
	        var self = this;
	        self.strSignDate = moment().format("YYYY-MM-DD");
			self.strMonth = moment().format("YYYY-MM-DD");
			self.singePeople = this.$route.params.singeAccount;
	    },
		data: function() {
			return {
                pageIndex: 0,//当前页数
                pageSize: 25,//一页包含数量
                startTime:moment().format("YYYY-MM-DD 00:00:00"),
                endTime:moment().format("YYYY-MM-DD 23:59:59"),
                //longitude: 0, // 用户经度
                //latitude: 0, // 用户纬度
                //userLatitude: "",
               // userLongitude: "",
                strSignDate: "", //某天
				strMonth: "", // 某月
				singePeople:"",  //签到人
			}
		},
		methods: {
			createCalendar:function(){
	                var self = this;
	                var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月' , '9月' , '10月', '11月', '12月'];
	                var monthNums = ['01','02','03','04','05','06','07','08','09','10','11','12']; 
	                var calendarInline = app.calendar.create({
	                    containerEl: '#signCalender',
	                    value: [new Date()],
	                    weekHeader: false,
	                    renderToolbar: function () {
	                        return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
	                        '<div class="toolbar-inner">' +
	                            '<div class="left">' +
	                            '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
	                            '</div>' +
	                            '<div class="center"></div>' +
	                            '<div class="right">' +
	                            '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
	                            '</div>' +
	                        '</div>' +
	                        '</div>';
	                    },
	                    on: {
	                        init: function (c) {
	                        	$(".calendar-day-today").append(`<div class="icon-today">
	                        		<i class="iconfont icon-jintian-"></i></div>`);
	                            $('.calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
	                            $('.calendar-custom-toolbar .left .link').on('click', function () {
	                                calendarInline.prevMonth();
	                            });
	                            $('.calendar-custom-toolbar .right .link').on('click', function () {
	                                calendarInline.nextMonth();
	                            });
	                        },
	                        monthYearChangeStart: function (c) {
	                            $('.calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
	                            self.strMonth = c.currentYear + '-' + monthNums[c.currentMonth] + '-01';
	                            
	                            self.getMonthSignDetail();
	                        },
	                        calendarDayClick:function (c,value) {
	                            var y = c.currentYear;
	                            var m = c.params.monthNames[c.currentMonth];
	                            var day = $(value).attr("data-day");
	                            day = parseInt(day) < 10 ? ('0'+day) : day;
	                            self.startTime = y + "-" + m +"-" + day + " 00:00:00";
	                            self.endTime = y + "-" + m +"-" + day + " 23:59:59";
	                            self.strSignDate = y + "-" + m + "-" + day;
	                            // $("#inspectionTitle").html( y + "-" + m +"-" + day + "&nbsp;&nbsp;&nbsp;共查岗<span style='color:#397FCF;padding:0 8px;' id='inspectionTotal'>0</span>次");
	                            self.getSignDetail();
	                      }
	                  }
	             });
	        },
	        
			//获取签到明细
            getSignDetail:function() {
            	var self = this;
            	var orgLocation = self.$route.params.orgLocation;
            	Dao.getSignDetail({
            	    signUser: self.singePeople!=0?self.singePeople:userInfor.accountName,
            		userName: userInfor.accountName,
            		strSignDate: self.strSignDate
            	}, function(data){
            		if(self.pageIndex==0){
            			$("#recordTime").empty();
            		}
            		if(data && data.length>0) {
            			for(var i=0;i<data.length;i++) {
            				var str = '<div class="timeline-item">'
        						+'<div class="timeline-item-date">'+data[i].signDate.split(' ')[1]+'</div>'
        						+'<div style="text-align: center;">'
        						+'<i class="iconfont icon-APPicon_dingwei" style="color: #2471CA;"></i>'
        						+'<div class="timeline-item-divider" style="height: 0px; margin-top: 0px;"></div>'
        						+'</div><div class="timeline-item-content">'
        						+'<div class="timeline-item-title">'+ data[i].signOrgName +'</div>'
        						+'<div class="check-content"><div class="main-content"><div style="padding:15px 15px 0px 15px;height: 120px">'
        						+ '<img src="'+picNo(data[i].signPicUrl)+'"></div>'
        						+'<div class="check-info"><div class="tb-info">'
        						+'<span class="tb-name">'+data[i].signOrgName+'</span></div>'
        						+'<div style="padding-top: 8px;cursor: pointer;" id="openMap_'+data[i].id+'">'
        						+ '<input type="hidden" data-name="userLongitude" value="'+data[i].userLongitude+'">'
            				    +'<input type="hidden" data-name="userLatitude" value="'+data[i].userLatitude+'">'
            				    +'<input type="hidden" data-name="longitude" value="'+data[i].longitude+'">'
            				    +'<input type="hidden" data-name="latitude" value="'+data[i].latitude+'">'
            				    +'<input type="hidden" data-name="radius" value="'+data[i].radius+'">';
        				 if(data[i].result == "1") { //范围内
        					 str += '<span style="color:#69BA71;font-size:12px">范围内签到</span>';
        				 } 
        			     if(data[i].result == "0") { //范围外
        			    	 str += '<span style="color:#E07762;font-size:12px">超出范围签到</span>'; 
               			 }
        					str	+= '<span style="float: right;">'
        						+'<i class="iconfont icon-jiantou"></i></span></div></div></div></div></div>'; 
            				$("#recordTime").append(str);

            				jQuery("#openMap_"+data[i].id).click(function() {
            				
            				var userLongitude = this.children[0].value;
            				var userLatitude = this.children[1].value;
            				var longitude = this.children[2].value;
            				var latitude = this.children[3].value;
            				var radius = this.children[4].value;
            				
            				if(localStorage.getItem("rdsp_search_records")){
            					
            					jQuery(".rdsp-org-popup-top").show();
            				}else {
            					jQuery(".rdsp-org-popup-top").hide();
            				}
            				var html = `<div><div id="lookMap" class="check-map" style="height:230px;"></div></div>`;
       					    openLayer(html,(el)=>{ });
       					    
       					    self.baiduMap(userLongitude,userLatitude,longitude,latitude,radius);
       					    
       					    jQuery(".layui-m-layercont").addClass("layui-map");
       				    });
            			}
            			
            			
            			
       				 
            		} else {  // 无数据
            			$("#recordTime").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
            		}
            	});
            },
            
            //获取当月签到时间
	        getMonthSignDetail: function() {
	            var self = this;
	            var $ = self.$;
	        	Dao.getMonthSignDetail({
	        		strSignDate: self.strMonth,
	        		signUser: self.singePeople != 0 ? self.singePeople : userInfor.accountName,       	
	        	}, function(data){
	        		if(data.length > 0) {  // data[i]签到时间
	        			for(var i=0;i < data.length;i++) {
	        			   var date = data[i];
	        			   //日历中的小圆点
	        			   var y,m,d;
	        			   y = date.toString().substring(0,4);
	        			   if(date.toString().substring(5,6) == '0') {
	        			      m = date.toString().substring(6,7);  
	        			   } else {
	        			      m = date.toString().substring(5,7);
	        			   }
	        			   if (date.toString().substring(8,9) == '0') {
	        			     d = date.toString().substring(9,10);
	        			   } else {
	        			     d = date.toString().substring(8,10);
	        			   }
                           	var attrValue = y + '-' + (m - 1) + '-' + d;
                           	$("#signCalender").find(".calendar-row div[data-date='"+attrValue+"'] span").addClass("calendarDay normalColor");
	        			}
	        		} 
	        	}, true);
	        },
	        
	        baiduMap: function(userLongitude,userLatitude,longitude,latitude,radius) {
	        	var self = this;
				// 百度地图API功能
				var map = new BMap.Map("lookMap"); // 创建Map实例
				var point = new BMap.Point(userLongitude, userLatitude);//user 经纬度
				
				var pointCircle = new BMap.Point(longitude, latitude);//原点经纬度

				var circle = new BMap.Circle(pointCircle,radius,{strokeColor:"blue",fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.2, strokeOpacity: 0.2}); //创建圆
        		var marker = new BMap.Circle(pointCircle,20,{strokeColor:"blue", strokeWeight:2}); //创建圆心点位置
        		
        		
        		//创建用户头像标注
        		var myIcon1 = new BMap.Icon(picPeopleNo(userInfor.headUrl), new BMap.Size(50,50),{
        			imageSize: new BMap.Size(17,17), // 引用图片实际大小
        			anchor: new BMap.Size(35,55),
        			imageOffset:new BMap.Size(5,4)  // 图片相对视窗的偏移
        		});
        		
        		var myIcon = new BMap.Icon('/ilink-app-h5-zd/static/img/rdspFile_1552981560146.png', new BMap.Size(35, 55), {
                    anchor: new BMap.Size(35,55)
                });
				
        		var myIconMarker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
        		var userIconMarker = new BMap.Marker(point,{icon:myIcon1});  // 创建标注
        		
        		map.centerAndZoom(point, 14);  // 初始化地图,设置中心点坐标和地图级别
        		//添加覆盖物
        		map.addOverlay(circle);            //增加圆
        		map.addOverlay(marker);            //增加圆
        		map.addOverlay(myIconMarker);       //将将标注添加到地图中
        		map.addOverlay(userIconMarker);       //将用户头像标注
        		
        		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			},
		},
		on: {
			pageInit : function(e, page) {
				 var self = this;
				 self.createCalendar();
				 
				 self.getMonthSignDetail();
				 
				 self.getSignDetail();
				 
			}
		}
	}
</script>

<style scoped>
.inspectionApply-page-top {
	margin: 10px 20px;
	box-shadow: 0 0 14px 1px rgba(181, 200, 206, .5);
	border-radius: 10px;
}

.tb-info span {
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

.pointImg-title {
	margin-left: 20px;
	margin-top: 30px;
	color: #333333;
	font-size: 17px;
	font-weight: 700;
}

.timeline-item-content {
	width: 100%;
	padding-right: 15px;
}

.timeline-item-date {
	color: #999999;
}

.timeline-item-title {
	font-size: 14px;
	color: #333333;
}

.check-content {
	margin-top: 10px;
}

.check-content .main-content {
	background: #ffffff;
	border: 1px solid rgba(225, 225, 225, 0.9);
	box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
	border-radius: 6px;
	position: relative;
}

.check-content .main-content img {
	width: 100%;
	height: 100%;
}

.check-content .check-info {
	margin-bottom: 10px;
	color: #999999;
	padding: 8px 16px 0px 16px;
	border-top: 1px solid rgba(208, 208, 208, 0.3);
}

.tb-name {
	font-size: 12px;
	font-family: PingFangSC-Semibold;
	font-weight: 600;
	color: #999999;
}

.tb-phone {
	z-index: 999;
	width: 120px;
	padding-top: 15px;
	height: 120px;
	background: url(../img/punch/checkIn.png) no-repeat;
	background-size: 100%;
	border-radius: 120px;
	color: #fff;
	font-size: 13px;
	text-align: center;
	letter-spacing: 2px;
	position: fixed;
	bottom: 10%;
	left: 0;
	right: 0;
	margin: auto;
}

    .icon-today {
        position: absolute;
        top: 20px;
    }
    #signCalender .calendar-day.calendar-day-today span {
        background: rgba(225, 225, 225, 1);
        opacity: 0.5;
        border-radius: 50%;
        color: #000;
    }
    #signCalender .calendar-day.calendar-day-today .icon-today {
        color: #000;
    }
    #signCalender .calendar-day.calendar-day-selected .icon-today {
        color: #fff;
    }
    #signCalender .calendar-day.calendar-day-selected span{
        background: #2196f3;
        color: #fff;
        opacity: 1;
    }
</style>